<template>
  <div class="welBox">
    <el-row class="welCard" :gutter="10">
      <!-- <el-col :span="24">
        <div class="welTitle bw">首页数据分析</div>
      </el-col> -->
      <el-col :span="6">
        <div class="welCardItem bw">
          <img src="img/c1.png" />
          <div>
            <label>小程序浏览量</label>
            <span
              ><i>{{ topData.accessNum || 0 }}</i
              >（人次）</span
            >
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="welCardItem bw">
          <img src="img/c2.png" />
          <div>
            <label>平台总共注册人数</label>
            <span
              ><i>{{ topData.platformSum || 0 }}</i
              >（人）</span
            >
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="welCardItem bw">
          <img src="img/c3.png" />
          <div>
            <label>今日新增注册数</label>
            <span
              ><i>{{ topData.todayRegistered || 0 }}</i
              >（人）</span
            >
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="welCardItem bw">
          <img src="img/c4.png" />
          <div>
            <label>今日新增知识数</label>
            <span
              ><i>{{ topData.todayDynamicNum || 0 }}</i
              >（篇）</span
            >
          </div>
        </div>
      </el-col>
    </el-row>
    <!--图表-->
    <el-row class="qstb" :gutter="10">
      <el-col :span="12">
        <div class="qstbLine bw">
          <div class="qstbLineTitle">浏览量趋势</div>
          <div class="qLine" ref="qLine" id="qLine"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <el-tabs class="qstbTab">
          <el-tab-pane label="平台知识评论数">
            <div class="tabInfo">
              <div
                v-for="(item, index) in commentData"
                :key="item"
                v-if="index < 6"
                class="tabInfoItem"
              >
                <div class="tabInfoItemName">{{ item.name }}</div>
                <el-progress
                  :stroke-width="16"
                  :text-inside="true"
                  :percentage="item.rate"
                  :format="(ff) => format(ff, item)"
                ></el-progress>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="平台知识点赞数">
            <div class="tabInfo">
              <div
                v-for="(item, index) in priseData"
                :key="item"
                v-if="index < 6"
                class="tabInfoItem"
              >
                <div class="tabInfoItemName">{{ item.name }}</div>
                <el-progress
                  :stroke-width="16"
                  :text-inside="true"
                  :percentage="item.rate"
                  :format="(ff) => format(ff, item)"
                ></el-progress>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!--活跃用户-->
    <div class="hyyh">
      <el-row class="hyyhContent" :gutter="20">
        <el-col class="hyyhTitle" :span="24">活跃用户列表</el-col>
        <el-col :span="8">
          <div class="hyyhMsg">日活跃</div>
          <div class="hyyhTable">
            <div class="hyyhTh">
              <span>排名</span>
              <span>会员名称</span>
            </div>
            <div v-if="tb1.length === 0" class="nnd">暂无数据</div>
            <div
              v-for="(item, index) in tb1"
              :key="item"
              v-if="tb1.length > 0 && index < 8"
              class="hyyhTh"
            >
              <span>{{ index + 1 }}</span>
              <label>{{ item.name }}</label>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="hyyhMsg">周活跃</div>
          <div class="hyyhTable">
            <div class="hyyhTh">
              <span>排名</span>
              <span>会员名称</span>
            </div>
            <div v-if="tb2.length === 0" class="nnd">暂无数据</div>
            <div
              v-for="(item, index) in tb2"
              :key="item"
              v-if="tb2.length > 0 && index < 8"
              class="hyyhTh"
            >
              <span>{{ index + 1 }}</span>
              <label>{{ item.name }}</label>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="hyyhMsg">月活跃</div>
          <div class="hyyhTable">
            <div class="hyyhTh">
              <span>排名</span>
              <span>会员名称</span>
            </div>
            <div v-if="tb3.length === 0" class="nnd">暂无数据</div>
            <div
              v-for="(item, index) in tb3"
              :key="item"
              v-if="tb3.length > 0 && index < 8"
              class="hyyhTh"
            >
              <span>{{ index + 1 }}</span>
              <label>{{ item.name }}</label>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import {
  getCount,
  getViews,
  getPraise,
  getComment,
  getDayUser,
  getWeekUser,
  getMothUser
} from '@/api/wel.js'

export default {
  components: {},
  name: 'wel',
  data() {
    return {
      topData: {},     //头部卡片数据

      myChart: [],
      lineData: [],    //折线图数据

      priseData: [],       //点赞数
      commentData: [],     //评论数

      tb1: [],
      tb2: [],
      tb3: [],

    }
  },
  computed: {
    ...mapGetters(['website']),

    //折线图
    lineOptions: function () {
      var lineData = JSON.parse(JSON.stringify(this.lineData));
      return {
        // title:{
        //     text:'销量趋势',
        //     left:'20px',
        //     top:'20px'
        // },
        grid: {
          top: '8%',
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        yAxis: { type: 'value' },
        xAxis: {
          type: 'category', data: lineData.map(r => r.date), boundaryGap: false,
        },
        tooltip: { trigger: 'axis' },
        series: [
          { name: '浏览量', data: lineData.map(r => r.num), type: 'line', areaStyle: { color: '#FD6E99' } },
        ],
      };
    },
  },
  mounted() {
    console.log(11111111111)
    this.$emit('change_leftFlag', {
      type: 'change',
      val: false
    })
    this.setChart(this.$refs.qLine, 'qLine');    //折线图

    this.init_data();
  },
  methods: {

    //初始化图表后丢进myChart
    setChart: function (refName, myChartname) {
      this.myChart[myChartname] = echarts.init(refName);
    },

    format(percentage, info) {
      return info.num;
    },

    //获取数据
    async init_data() {
      await this.getCountData();
      await this.getViewsData();
      await this.getPraiseData();
      await this.getCommentData();
      await this.getDayUserData();
      await this.getWeekUserData();
      await this.getMothUserData();


      this.myChart.qLine.setOption(this.lineOptions);
    },

    //获取数据统计
    getCountData() {
      var vm = this;
      return new Promise((resolve, reject) => {
        getCount().then(res => {
          var data = res.data.data;
          vm.topData = data;
          resolve();
        }).catch(err => {
          reject();
        });
      })
    },

    //浏览量趋势
    getViewsData() {
      var vm = this;
      return new Promise((resolve, reject) => {
        getViews().then(res => {
          console.log(res);
          var data = res.data.data;
          console.log(data);
          vm.lineData = data;
          resolve();
        }).catch(err => {
          reject();
        });
      })
    },

    //知识评论数
    getPraiseData() {
      var vm = this;
      return new Promise((resolve, reject) => {
        getPraise().then(res => {
          var data = res.data.data;
          var maxNum = 0;
          data.map(r => {
            if (r.num > maxNum) {
              maxNum = r.num;
            }
          })
          data.map(r => {
            r.rate = parseInt((r.num / maxNum) * 100);
            return r;
          })
          vm.priseData = data;
          console.log('点赞数', data);
          resolve();
        }).catch(err => {
          reject();
        });
      })
    },

    //知识点赞数
    getCommentData() {
      var vm = this;
      return new Promise((resolve, reject) => {
        getComment().then(res => {
          var data = res.data.data;
          var maxNum = 0;
          data.map(r => {
            if (r.num > maxNum) {
              maxNum = r.num;
            }
          })
          data.map(r => {
            r.rate = parseInt((r.num / maxNum) * 100);
            return r;
          })
          vm.commentData = data;
          console.log('评论数', data);
          resolve();
        }).catch(err => {
          reject();
        });
      })
    },

    //日活跃
    getDayUserData() {
      var vm = this;
      return new Promise((resolve, reject) => {
        getDayUser().then(res => {
          console.log(res);
          var data = res.data.data;
          console.log('日活跃', data);
          vm.tb1 = data;
          resolve();
        }).catch(err => {
          reject();
        });
      })
    },

    //周活跃
    getWeekUserData() {
      var vm = this;
      return new Promise((resolve, reject) => {
        getWeekUser().then(res => {
          console.log(res);
          var data = res.data.data;
          vm.tb2 = data;
          console.log(data);
          resolve();
        }).catch(err => {
          reject();
        });
      })
    },

    //月活跃
    getMothUserData() {
      var vm = this;
      return new Promise((resolve, reject) => {
        getMothUser().then(res => {
          console.log(res);
          var data = res.data.data;
          vm.tb3 = data;
          console.log(data);
          resolve();
        }).catch(err => {
          reject();
        });
      })
    },

  }
}
</script>
<style lang="scss">
.welBox {
  .el-progress-bar__inner {
    background: linear-gradient(90deg, #fb6174, #ff936f) !important;
  }
  .el-tabs__item {
    font-size: 16px;
    font-family: Microsoft YaHei;
  }
  .el-tabs__item.is-active {
    font-weight: bold;
  }
}
</style>

<style scoped="scoped" lang="scss">
.welBox {
  margin: 0 15px;
  width: calc(100% - 30px);
  box-sizing: border-box;
  // padding: 5px 10px;
}
.welTitle {
  // margin-bottom: 30px;
  font-weight: bold;
  font-size: 18px;
}

.bw {
  background-color: #fff;
  padding: 15px;
}

.welCard {
  .welCardItem {
    width: 100%;
    height: 140px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    box-sizing: border-box;
    padding-left: 40px;
    // justify-content: center;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    cursor: pointer;

    img {
      width: 75px;
      height: 75px;
      margin-right: 20px;
    }

    div {
      display: flex;
      flex-direction: column;
      justify-content: center;

      label {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #666666;
        margin-bottom: 2px;
      }
      span {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #666666;
        i {
          margin-right: 7px;
          font-style: normal;
          font-size: 32px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
}

.qstb {
  .qstbLine {
    background-color: #fff;
    height: 480px;
    border-radius: 10px;
    .qstbLineTitle {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
    }
    .qLine {
      width: 100%;
      height: 429px;
    }
  }
  .qstbTab {
    background-color: #fff;
    height: 480px;
    box-sizing: border-box;
    padding: 5px 20px;
    border-radius: 10px;

    .tabInfo {
      width: 100%;
      padding: 5px 10px;
      box-sizing: border-box;

      .tabInfoItem {
        margin-bottom: 20px;
      }
    }
    .tabInfoItemName {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      line-height: 1;
      margin-bottom: 6px;
    }
  }
}

.hyyh {
  margin: 0 10px;

  .hyyhContent {
    border-radius: 10px;
    padding: 15px;
    background-color: #fff;
    box-sizing: border-box;
  }
  .hyyhTitle {
    font-size: 16px;
    font-weight: bold;
  }
  .hyyhMsg {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 8px;
  }
  .hyyhTable {
    box-sizing: border-box;
    width: 100%;
    min-height: 420px;
    background: #ffffff;
    border: 1px solid #dedede;
    border-radius: 2px;
    padding: 10px;

    .nnd {
      color: #999;
      font-size: 14px;
      text-align: center;
      line-height: 60px;
    }
    .hyyhTh {
      width: 100%;
      height: 46px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;

      span {
        display: inline-block;
        padding: 0 20px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
      label {
        padding: 0 20px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }
    }
    .hyyhTh:nth-child(2n + 1) {
      background-color: #f3f3f8;
    }
  }
}
</style>
